<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态显示文字</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./xing.js"></script>
</head>

<body>
    <div class="box">
        <div class="qw">
            <div class="box1">
                <input type="text" placeholder="请输入要显示的文字" spellcheck="false">
            </div>
            <div class="box2">
                <input type="text" placeholder="请输入要显示的颜色" spellcheck="false">
            </div>
            <div class="box3">
                <textarea name="" id="q" cols="10" rows="3" placeholder="可不填,若填,必须是字体,如:❤" spellcheck="false"></textarea>
                <button>提交</button>
            </div>
        </div>
        <canvas class="canvas"></canvas>
    </div>

    <!-- 星星 -->
    <div class="contain" id="contain">
        <div class="xingxing">
            <div class="x-inside"></div>
        </div>
    </div>
    

    <script>
        var content = document.querySelector('.canvas');
        var ctx = content.getContext('2d');
        var w = 300;
        var h = 190;

        var btn = document.querySelector('.box3 button');
        var inp = document.querySelectorAll('input');
        var inp1 = document.querySelector('.box1 input');
        var inp2 = document.querySelector('.box2 input');
        var inp3 = document.querySelector('.box3 textarea');


        for(var i=0;i<inp.length;i++){
            inp[i].addEventListener('focus',function(){
                this.value=''
        })
        }
        

        btn.addEventListener('touchstart', fn1);

        function fn1() {
            ctx.clearRect(0, 0, w, h);
            var textColor = '';
            var inptext = '';
            var showtxt = '';
            inptext = inp1.value;
            textColor = inp2.value;
            showtxt = inp3.value;
            //画文字
            drawText(inptext, w / 2, h / 2);
            //获取像素点
            var copy = ctx.getImageData(0, 0, w, h);
            var circle_r = 1;

            //获取像素点后，再清除画布准备画小圆像素点
            ctx.clearRect(0, 0, w, h);

            var time = 100;
            function Ball(speedX, speedY) {
                this.x = r(w);
                this.y = r(h);
                this.endX = speedX;
                this.endY = speedY;
                this.color = textColor; //产生随机颜色
                this.speedX = (this.endX - this.x) / time;
                this.speedY = (this.endY - this.y) / time;
                this.text=showtxt;
            }

            if (showtxt!='') {
                //定义小球显示方法
                Ball.prototype.show = function () {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    drawFillText(this.text, this.x, this.y, this.color);
                }
            } else {
                Ball.prototype.show = function () {
                    this.run();
                    drawCircle(this.x, this.y, circle_r, this.color);
                }
            }


            Ball.prototype.run = function () {
                this.x += this.speedX;
                this.y += this.speedY;
            }


            //筛选有效的像素点
            var ballArr = [];
            var leap = 2;
            for (var y = 0; y < h; y += leap) {
                for (var x = 0; x < w; x += leap) {
                    var index = x + y * w;
                    var a = copy.data[index * 4 + 3];
                    if (a > 128) {
                        var ball = new Ball(x, y);
                        ballArr.push(ball);
                    }
                }
            }

            var count = 0;
            var timer = setInterval(function () {
                if (count == time) {
                    clearInterval(timer);
                    return;
                } else {
                    ctx.clearRect(0, 0, w, h)
                    ballArr.forEach(item => {
                        item.show();
                    })
                }
                count++;
            }, 20)
        }



        //产生随机数
        function r(num) {
            return parseInt(Math.random() * num)
        }

        //画文字
        function drawText(text, x, y) {
            ctx.font = '3.5rem 微软雅黑';
            ctx.fillStyle = '#000'
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(text, x, y, w)
        }

        //填充文字
        function drawFillText(text, x, y, color) {
            ctx.font = '10px 微软雅黑';
            ctx.fillStyle = color;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(text, x, y, w)
        }

        // 画圆
        function drawCircle(x, y, r, color) {
            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2, true)
            ctx.fillStyle = color || '#000';
            ctx.fill();
            ctx.closePath()
        }

        var doc = document.documentElement;
        doc.addEventListener('click', function (e) {
            e.preventDefault();
        })


    </script>
</body>

</html>